<template>
   <view class="uv-page">
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">基本使用</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__button-item">
               <uv-qrcode ref="uvqrcode" :options="options1" value="https://h5.uvui.cn"></uv-qrcode>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义样式</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__button-item">
               <uv-qrcode ref="uvqrcode2" value="https://h5.uvui.cn" :options="options2">
                  <template v-slot:loading>
                     <uv-loading-icon color="red"></uv-loading-icon>
                  </template>
               </uv-qrcode>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义风格</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__button-item">
               <uv-qrcode ref="uvqrcode3" value="https://h5.uvui.cn" :options="options3">
               </uv-qrcode>
            </view>
            <uv-gap></uv-gap>
            <uv-button
               text="保存二维码"
               type="primary"
               :custom-style="{ width: '200px' }"
               @click="saveQRCode"
            ></uv-button>
         </view>
      </view>
   </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const uvqrcode2 = ref();
const uvqrcode3 = ref();

const options1 = ref({
   foregroundImageSrc: 'https://www.uvuix.cn/common/logo.png',
});
const options2 = ref({
   data: 'https://www.uvuix.cn',
   size: 300,
   useDynamicSize: false,
   errorCorrectLevel: 'Q',
   margin: 10,
   areaColor: '#F95F6B',
   backgroundColor: '#3c9cff',
});
const options3 = ref({
   style: 'round',
   foregroundImageSrc: 'https://www.uvuix.cn/common/logo.png',
});

const saveQRCode = () => {
   uvqrcode2.value.save({
      success: () => {
         uni.showToast({
            icon: 'success',
            title: '保存成功',
         });
      },
      fail: () => {
         uni.showToast({
            icon: 'none',
            title: '保存失败',
         });
      },
   });
};
</script>

<style lang="scss" scoped></style>
